<template>
    <div>
        <button @click="addEmps">增加员工信息</button>
        <h2>所有员工信息</h2>
        <table>
            <thead>
                <tr>
                    <td>序号</td>
                    <td>工号</td>
                    <td>姓名</td>
                    <td>职位</td>
                    <td>入职日期</td>
                    <td>工资</td>
                    <td>奖金</td>
                    <td>部门</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(emp,index) in emps" :key="emp.empno">
                    <td>{{index+1}}</td>
                    <td>{{emp.empno}}</td>
                    <td>{{emp.ename}}</td>
                    <td>{{emp.job}}</td>
                    <td>{{emp.hiredate|formatDate}}</td>
                    <td>{{emp.sal|formatSalary|rmbmomey}}</td>
                    <td>{{emp.comm|formatSalary|usdmomey}}</td>
                    <td>{{emp.deptno|tranformChineDeparment}}</td>
                    <td>
                        <button @click="updateSal(index)">涨薪</button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script>
export default {
    data(){
        return{
            emps:[
                {
                    empno:'7369',
                    ename:'SMITH',
                    job:'MANGER',
                    hiredate:new Date('2020','01','05'),
                    sal:1200,
                    comm:0,
                    deptno:10
                },
                {
                    empno:'7499',
                    ename:'KING',
                    job:'SALES',
                    hiredate:new Date('2021','02','06'),
                    sal:8000,
                    comm:10000,
                    deptno:20
                },
                {
                    empno:'7684',
                    ename:'JACK',
                    job:'SALES',
                    hiredate:new Date('2009','08','05'),
                    sal:6200,
                    comm:100,
                    deptno:10
                },
                {
                    empno:'7987',
                    ename:'JERRY',
                    job:'SALE',
                    hiredate:new Date('2020','01','05'),
                    sal:3200,
                    comm:100,
                    deptno:10
                },
                {
                    empno:'7654',
                    ename:'JAHONE',
                    job:'MANGER',
                    hiredate:new Date('2020','01','05'),
                    sal:9200,
                    comm:1000,
                    deptno:20
                }
            ]
        }
    },
    //局部过滤器，该过滤器只对该组件有用
    filters:{
        tranformChineDeparment(val){
            switch(val){
                case 10:
                    return "销售部"
                case 20:
                    return "行政部"
            }
        }
    }
  
}
</script>

<style>
     table{
        border-collapse: collapse;
        width: 1000px;
    }
    td{
        text-align: center;
        padding: 10px;
        border: 1px solid #ccc;
    }
</style>